<template>
	<view>
		<!-- <view class="center ">
			<view class="d-flex bb" @tap="goAlipay">
				<view class="flex-1 mt-3 mb-3 ml-2 fs28 ls2">支付宝收款码</view>
				<image class="m-2 mt-4" src="@/static/img/user/right.png" mode="widthFix" style="width: 15rpx;">
				</image>
			</view>

			<view class="d-flex bb" @tap="goWechat">
				<view class="flex-1 mt-3 mb-3 ml-2 fs28 ls2">微信收款码</view>
				<image class="m-2 mt-4" src="@/static/img/user/right.png" mode="widthFix" style="width: 15rpx;">
				</image>
			</view>
			<view class="d-flex bb" @tap="goBanks">
				<view class="flex-1 mt-3 mb-3 ml-2 fs28 ls2">银行卡（仅限一张）</view>
				<image class="m-2 mt-4" src="@/static/img/user/right.png" mode="widthFix" style="width: 15rpx;">
				</image>
			</view>
		</view> -->
		<u-navbar title="添加收款方式" :autoBack="true"></u-navbar>
		<view class="content">
			<u-tabs @change="changeTab" :list="list" class="tap_t" :scrollable="false" lineWidth="26"
				activeStyle="color:#fe6601" inactiveStyle="color:#575757" lineColor="#fe6601">
			</u-tabs>
			<view class="vessel">
				<!-- 表单模块 -->
				<view class="fromBlock">
					<form>
						<view class="perLine">
							<label>姓名</label>
							<input placeholder="请输入真实姓名" placeholder-style="color:#bbbbbb;font-size:28rpx;"
								v-model="realname" />
						</view>
						<block v-if="activeIndex == 0">
							<view class="perLine">
								<label>银行名称</label>
								<input placeholder="请输入银行名称" v-model="bankname"
									placeholder-style="color:#bbbbbb;font-size:28rpx;" />
							</view>
							<view class="perLine">
								<label>银行卡号</label>
								<input placeholder="请输入您的银行卡卡号" placeholder-style="color:#bbbbbb;font-size:28rpx;"
									v-model="bank_number" />
							</view>
							<view class="perLine">
								<label>银行开户行</label>
								<input placeholder="请输入您的银行开户行" placeholder-style="color:#bbbbbb;font-size:28rpx;"
									v-model="bank_address" />
							</view>
						</block>
						<block v-else-if="activeIndex == 1">
							<view class="perLine">
								<label>支付宝</label>
								<input placeholder="请输入支付宝账号" v-model="alipay"
									placeholder-style="color:#bbbbbb;font-size:28rpx;" />
							</view>
						</block>
						<block v-else-if="activeIndex == 2">
							<view class="perLine">
								<label>微信号</label>
								<input placeholder="请输入您的微信号" v-model="wechat"
									placeholder-style="color:#bbbbbb;font-size:28rpx;" />
							</view>
						</block>
						<view class="msg">
							<span>温馨提示：</span>请保存与实名信息匹配的收款方式，否则造成的损失由自己承担!
						</view>
						<view class="btnFun" v-show="activeIndex==0" @tap="goBanks">添加</view>
						<view class="btnFun" v-show="activeIndex==1" @tap="goAlipay">添加</view>
						<view class="btnFun" v-show="activeIndex==2" @tap="goWechat">添加</view>
					</form>

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				version: '',

				list: [{
					name: '银行卡',
				}, {
					name: '支付宝',
				}, {
					name: '微信'
				}],
				activeIndex: 0,

				realname: '',
				bankname: '',
				bank_number: '',
				bank_address: '',
				alipay: '',
				wechat: '',
			}
		},
		onLoad() {
			if (!this.hasLogin) {
				this.$api.msg('请先登录！', 'none');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login',
					})
				}, 1000)
				return false;
			}

			this.loadData();

			uni.$on('changeUser', () => {
				this.loadData();
			})
		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['logout']),

			async loadData() {

				uni.showLoading({
					title: '加载中...'
				});
				let token = uni.getStorageSync('token');
				if (!token) {
					this.$api.msg('token缺失！');
					uni.hideLoading();
					return;
				}
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: token
					},
					methods: 'post'
				})
				let info = res.data.data;
				this.uIfo = info;
				uni.hideLoading();
			},

			changeTab(e) {
				// console.log(e)
				this.activeIndex = e.index
			},

			//银行卡
			async goBanks() {
				if (!this.realname) {
					this.$api.msg('真实姓名不能为空！');
					return false;
				}
				if (!this.bankname) {
					this.$api.msg('银行名称不能为空！');
					return false;
				}
				if (!this.bank_address) {
					this.$api.msg('银行开户行不能为空！');
					return false;
				}
				if (!this.bank_number) {
					this.$api.msg('银行卡号不能为空！');
					return false;
				}
				let url = '/updateMemberMsg';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: uni.getStorageSync('token'),
						type: 1,
						realname: this.realname,
						bank_name: this.bankname,
						bank_number: this.bank_number,
						bank_address: this.bank_address,
					},
					methods: 'post'
				})
				// console.log(res)
				this.$api.msg(res.data.msg);
			},

			async goAlipay() {
				if (!this.realname) {
					this.$api.msg('真实姓名不能为空！');
					return false;
				}
				if (!this.alipay) {
					this.$api.msg('支付宝账号不能为空！');
					return false;
				}

				let url = '/updateMemberMsg';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: uni.getStorageSync('token'),
						type: 2,
						realname: this.realname,
						alipay: this.alipay,
					},
					methods: 'post'
				})
				// console.log(res)
				this.$api.msg(res.data.msg);
			},

			async goWechat() {
				if (!this.realname) {
					this.$api.msg('真实姓名不能为空！');
					return false;
				}
				if (!this.wechat) {
					this.$api.msg('微信号不能为空！');
					return false;
				}

				let url = '/updateMemberMsg';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: uni.getStorageSync('token'),
						type: 3,
						realname: this.realname,
						wechat: this.wechat,
					},
					methods: 'post'
				})
				// console.log(res)
				this.$api.msg(res.data.msg);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	.vessel {
		position: relative;
		// top: 60rpx;
		padding: 30rpx;
		transition: all .3s ease-in-out;
	}

	.fromBlock {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 10rpx 30rpx 50rpx 30rpx;
	}

	.perLine {
		padding: 22rpx 0;
		border-bottom: 2rpx solid #e9e9e9;
		font-size: 28rpx;
		// font-weight: bold;
		display: flex;
		align-items: center;
	}

	.perLine input {
		font-size: 28rpx;
		font-weight: 500;
	}

	label {
		width: 25%;
	}

	.msg {
		margin-top: 20rpx;
		border: 4rpx solid #c06560;
		border-radius: 10rpx;
		background-color: #fcd4d5;
		font-size: 26rpx;

		padding: 20rpx 30rpx;
	}

	.msg span {
		/* font-size: 28rpx; */
		font-weight: bold;
		color: #bb4c52;
	}

	.btnFun {
		margin-top: 50rpx;
		background-color: #fe6601;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.content {
		position: relative;
		top: 80px;
	}

	.tap_t {
		background: #fff;
	}

	.tap_t>>>.u-tabs__wrapper__nav {
		width: 100vw;
		background: #fff;
	}

	.tap_t>>>.u-tabs__wrapper__nav__item__text {
		font-size: 28rpx !important;
		font-weight: 600;
		width: unset;
		padding: 20rpx 0;
	}

	.tap_t>>>.u-tabs__wrapper__nav__line {
		bottom: 0 !important;
	}
</style>
